<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>码客学员信息系统</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	
<!-- 信息头部 -->
<div class="info_stu_head">
	<div class="stu_info">
		<!-- <div class="mk_logo"> -->
		<img src="02.png">
		<!-- </div> -->
		<div class="stu_name">
			<p>李佳楠</p>
			<p>2018-02-22（入学时间）</p>
		</div>
	</div>
	<a href="javascript:;">返回首页</a>
</div>
<!-- 班级详细信息列表 -->
<div class="detail_info_area">
	<!-- 班级1 -->
	<div class="detail_list">
		<div class="info_class">
			<span>班级：</span><span>PHP171202</span>
			<span>2018-02-22</span>
		</div>
		<div class="show_area">
			<ul class="list_ul">
				<li>排名</li>
				<li>成绩</li>
				<li>请假</li>
				<li>迟到</li>
				<li>旷课</li>
			</ul>
			<ul class="num_list">
				<li>1</li>
				<li>100</li>
				<li>0</li>
				<li>0</li>
				<li>0</li>
			</ul>
			<ul class="remark_area">
				<li>备注</li>
				<li>
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
				</li>
			</ul>
		</div>
	</div>
	<!-- 班级2 -->
	<div class="detail_list">
		<div class="info_class">
			<span>班级：</span><span>PHP171202</span>
			<span>2018-02-22</span>
		</div>
		<div class="show_area">
			<ul class="list_ul">
				<li>排名</li>
				<li>成绩</li>
				<li>请假</li>
				<li>迟到</li>
				<li>旷课</li>
			</ul>
			<ul class="num_list">
				<li>1</li>
				<li>100</li>
				<li>0</li>
				<li>0</li>
				<li>0</li>
			</ul>
			<ul class="remark_area">
				<li>备注</li>
				<li>
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
				</li>
			</ul>
		</div>
	</div>
	<!-- 班级3 -->
	<div class="detail_list">
		<div class="info_class">
			<span>班级：</span><span>PHP171202</span>
			<span>2018-02-22</span>
		</div>
		<div class="show_area">
			<ul class="list_ul">
				<li>排名</li>
				<li>成绩</li>
				<li>请假</li>
				<li>迟到</li>
				<li>旷课</li>
			</ul>
			<ul class="num_list">
				<li>1</li>
				<li>100</li>
				<li>0</li>
				<li>0</li>
				<li>0</li>
			</ul>
			<ul class="remark_area">
				<li>备注</li>
				<li>
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
				</li>
			</ul>
		</div>
	</div>
	<!-- 班级4 -->
	<div class="detail_list">
		<div class="info_class">
			<span>班级：</span><span>PHP171202</span>
			<span>2018-02-22</span>
		</div>
		<div class="show_area">
			<ul class="list_ul">
				<li>排名</li>
				<li>成绩</li>
				<li>请假</li>
				<li>迟到</li>
				<li>旷课</li>
			</ul>
			<ul class="num_list">
				<li>1</li>
				<li>100</li>
				<li>0</li>
				<li>0</li>
				<li>0</li>
			</ul>
			<ul class="remark_area">
				<li>备注</li>
				<li>
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
				</li>
			</ul>
		</div>
	</div>
	<!-- 班级5 -->
	<div class="detail_list">
		<div class="info_class">
			<span>班级：</span><span>PHP171202</span>
			<span>2018-02-22</span>
		</div>
		<div class="show_area">
			<ul class="list_ul">
				<li>排名</li>
				<li>成绩</li>
				<li>请假</li>
				<li>迟到</li>
				<li>旷课</li>
			</ul>
			<ul class="num_list">
				<li>1</li>
				<li>100</li>
				<li>0</li>
				<li>0</li>
				<li>0</li>
			</ul>
			<ul class="remark_area">
				<li>备注</li>
				<li>
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
					内容描述内容描述内容描述内容描述内容描述
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="one">
		
	</div>

<script type="text/javascript">
	//判断屏幕尺寸
	function Rem() {
	    var docEl = document.documentElement,
	        oSize = docEl.clientWidth / 7.5;
	    if(oSize > 85) {
	        oSize = 85; //  限制rem值   640 / 7.5 ≈ 85
	    }

	    docEl.style.fontSize = oSize + 'px';
	}
	window.addEventListener('resize', Rem, false);
	Rem();
	//判断屏幕尺寸End
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".detail_info_area .detail_list").first().children('.show_area').show();
		$(".info_class").click(function(event) {
			$(this).parent().siblings('.detail_list').children('.show_area').slideUp();
			$(this).siblings('.show_area').slideDown();
		});
	})
</script>
</body>
</html>